<template>
  <div class="theme">
    <div
      class="themeItem"
      @click="changeTheme(item.themeName)"
      v-for="item in themeList"
      :key="item.color"
    >
      <div class="color" :style="{ background: item.color }">
        <i class="iconfont icon-hook" v-if="themeNames == item.themeName"></i>
      </div>
      <div class="colorText">{{ item.colorText }}</div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted } from "vue";
import { theme } from "@/assets/theme/theme.json";
import { ref } from "vue";

let themeList = [
  { color: "#1F6DED", colorText: "科技蓝", themeName: "TcBlue" },
  { color: "#165DFF", colorText: "极客蓝", themeName: "GeekBlue" },
  { color: "#00BBBB", colorText: "希望青", themeName: "HopeCyan" },
  { color: "#00B074", colorText: "清新绿", themeName: "FreshGreen" },
  { color: "#DB0025", colorText: "中国红", themeName: "ChinaRed" },
  { color: "#FF6000", colorText: "活力橙", themeName: "ActiveOrange" },
  { color: "#FAAD14", colorText: "明媚黄", themeName: "BrightYellow" },
  { color: "#722ED1", colorText: "绚丽紫", themeName: "GorgeousPurple" },
];
const themeNames = ref<string>(sessionStorage.themeName);

//修改主题
const setTheme = (val: string) => {
  let themeJson = theme[val];
  const root = document.documentElement;
  for (let item in themeJson) {
    root.style.setProperty(item, themeJson[item]);
  }
};
const changeTheme = (themeName: string) => {
  themeNames.value = themeName;
  setTheme(themeName);
  sessionStorage.themeName = themeName;
};
onMounted(async () => {
  (await sessionStorage.themeName) ? setTheme(sessionStorage.themeName) : changeTheme("TcBlue");
});
</script>

<style lang="less" scoped>
.theme {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  width: 254px;

  .themeItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 16px 12px 8px;

    .color {
      width: 40px;
      height: 40px;
      border-radius: 2px 2px 2px 2px;
      text-align: center;
      cursor: pointer;
      .icon-hook {
        line-height: 40px;
        font-size: 24px;
        color: #fff;
      }
    }

    .colorText {
      margin-top: 10px;
      font-size: 14px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: rgba(0, 0, 0, 0.85);
      line-height: 14px;
    }
  }

  .themeItem:nth-child(-n + 4) {
    padding: 12px 16px 12px 8px;
  }

  .themeItem:nth-child(4) {
    padding: 12px 0px 12px 8px;
  }

  .themeItem:nth-child(8) {
    padding: 12px 0px 12px 8px;
  }
}
</style>
